π― Prophetic Intelligence Platform - Frontend
Professional Dashboard for Biblical Prophecy Monitoring
This is the frontend dashboard that displays RSS feeds, real-time articles, and prophecy analytics from the backend data engine.
π Quick Setup
1. Deploy to Cloudflare Pages
# Clone the repository
git clone https://github.com/YellowKidokc/Prophetic-Intelligence-Platform-Frontend.git
cd Prophetic-Intelligence-Platform-Frontend
# Configure backend URL in index.html
# Edit line ~200: const BACKEND_URL = "https://your-backend-worker.workers.dev";
# Deploy to Cloudflare Pages
# Method 1: Drag and drop the folder to Cloudflare Pages dashboard
# Method 2: Connect GitHub repository to Cloudflare Pages2. Configure Backend Connection
Update index.html line ~200:
// Replace with your actual backend URL
const BACKEND_URL = "https://your-backend-worker.your-subdomain.workers.dev";β¨ Features
π Professional Dashboard
- Six-tier feed organization: Breaking News β Core Prophecies
- Real-time statistics: Feed counts, articles processed, system health
- Clean interface: Professional dark theme with green accents
- Responsive design: Works on desktop, tablet, and mobile
π‘ Live Intelligence Stream
- Real-time article feed: Latest high-scoring articles (5.0+)
- Auto-refresh: Every 15 seconds (toggleable)
- Color-coded scoring: Red (8.0+), Orange (6.0+), Green (<6.0)
- Click to read: Opens articles in new tab
β‘ Backend Integration
- Direct backend access: Button to open backend dashboard
- Manual triggers: Force RSS ingestion from frontend
- Data export: Download feed configurations as JSON
- Error handling: Graceful fallbacks for connection issues
π― Feed Categories
- TIER 1: Breaking News (π¨ Every 5 minutes)
- TIER 2: Prophetic Teaching (π Every 30 minutes)
- TIER 3: Research Sources (π¬ Hourly)
- TIER 4: Geopolitical (π Daily)
- TIER 5: Antichrist Watch (π Real-time)
- TIER 6: Core Prophecies (π Key indicators)
π₯οΈ Dashboard Layout
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Ξ©Ξ₯ΞΞΞΞ INTELLIGENCE PLATFORM β
β Automated Biblical Prophecy Monitoring β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β [π Refresh] [π€ Export] [βοΈ Backend] [π Trigger] β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β π¨ TIER 1: Breaking News π TIER 2: Prophetic Teaching β
β β’ Breaking Israel News β’ Jack Hibbs β
β β’ Israel National News β’ Amir Tsarfati β
β β’ Jerusalem Post β’ JD Farag β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β π¬ TIER 3: Research π TIER 4: Geopolitical β
β β’ Prophecy News Watch β’ World Net Daily β
β β’ Rapture Ready β’ DEBKAfile β
β β’ Biblical Archaeology β’ UN News β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β π TIER 5: Antichrist π TIER 6: Core Prophecies β
β β’ Specialized feeds β’ Key indicators β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β [32] Active β [2,847] β [14,582] β [12s] β
β Feeds β Today β Total β Response β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β π‘ LIVE INTELLIGENCE STREAM [Refresh] [Auto: ON] β
β β
β β’ Macron announces peace framework... Score: 8.7/10 β
β β’ Temple preparations advance... Score: 9.1/10 β
β β’ Digital ID system proposed... Score: 6.4/10 β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
π§ Configuration
Backend URL Setup
- Deploy your backend first using the Backend Repository
- Get your backend URL from the Cloudflare Workers deployment
- Update the frontend by editing
index.html:
// Line ~200 in index.html
const BACKEND_URL = "https://your-actual-backend-url.workers.dev";Custom Domain (Optional)
- Go to Cloudflare Pages β Your Site β Custom Domains
- Add domain:
dashboard.yoursite.com - Update DNS records as instructed
π¨ Customization
Theme Colors
Edit CSS variables in index.html:
:root {
--primary-color: #00ff88; /* Main green */
--background: #0a0a0a; /* Dark background */
--accent: #1a1a2e; /* Card backgrounds */
--text: #ffffff; /* Main text */
--muted: #888888; /* Secondary text */
}Categories
Add or modify feed categories:
// In loadDashboardData() function
const categorizedFeeds = {
'breaking-news': [],
'prophetic-teaching': [],
'research-sources': [],
'geopolitical': [],
'antichrist-watch': [],
'core-prophecies': [],
'your-custom-category': [] // Add custom categories
};Refresh Intervals
// Auto-refresh interval (currently 15 seconds)
setInterval(() => {
if (isLiveAutoRefreshEnabled) {
fetchLiveFeed();
}
}, 15000); // Change to your preferred intervalπ± Mobile Responsive
The dashboard automatically adapts to different screen sizes:
- Desktop: 6-column grid layout
- Tablet: 3-column grid layout
- Mobile: Single column layout
- Touch-friendly: Large buttons and touch targets
π API Integration
The frontend calls these backend endpoints:
Feed Management
// Get all feeds
GET /api/feeds
// Get recent high-scoring articles
GET /api/articles/recent?limit=10
// Get system statistics
GET /api/stats
// Trigger manual ingestion
POST /api/ingest-nowError Handling
try {
const response = await fetch(`${BACKEND_URL}/api/feeds`);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
// Process data...
} catch (error) {
console.error('API Error:', error);
showError('Failed to load data. Check backend connection.');
}π οΈ Development
Local Testing
# Serve locally using any static server
python -m http.server 8000
# or
npx serve .
# or
live-server
# Open http://localhost:8000Browser Console
Use browser dev tools to:
- Monitor API calls: Network tab
- Debug JavaScript: Console tab
- Check errors: Console tab shows connection issues
- Test functions: Call dashboard functions manually
// Test functions in browser console
refreshDashboard();
fetchLiveFeed();
triggerIngestion();π― Usage Workflow
Daily Operation
- Open dashboard in browser
- Check stats for feed health
- Review live stream for high-scoring articles
- Trigger ingestion if needed
- Export data for analysis
Feed Management
- Use backend dashboard for adding feeds
- Upload OPML files via backend
- Monitor feed categories on frontend
- Adjust scoring via backend configuration
Monitoring
- Auto-refresh enabled: Latest articles appear automatically
- Color-coded scores: Red = urgent, Orange = significant, Green = watchlist
- Click articles: Opens source in new tab
- Export functionality: Save configurations and data
π Related Projects
- Backend Engine: Prophetic-Intelligence-Platform-BackEND
π¨ Troubleshooting
Common Issues
βLoading feedsβ¦β never resolves:
- Check backend URL is correct in
index.html - Verify backend is deployed and running
- Check browser console for CORS errors
No articles in live stream:
- Ensure feeds are added to backend
- Trigger manual ingestion
- Check if articles score β₯ 5.0 (only high-scoring articles are saved)
Stats showing zeros:
- Backend database may not be initialized
- Run database schema setup on backend
- Add some RSS feeds via backend dashboard
Browser Console Debugging
// Check if backend is reachable
fetch('https://your-backend.workers.dev/api/stats')
.then(r => r.json())
.then(console.log)
.catch(console.error);
// Test article loading
fetch('https://your-backend.workers.dev/api/articles/recent')
.then(r => r.json())
.then(console.log);β Success Checklist
- Backend URL configured correctly
- Dashboard loads without errors
- Feed categories show actual feeds (not βLoadingβ¦β)
- Stats display real numbers
- Live stream shows recent articles
- Auto-refresh works (articles update automatically)
- Backend dashboard button opens backend
- Export function downloads JSON file
- Mobile layout works properly
Once these work, you have a fully functional prophetic intelligence dashboard! π
Ring 2 β Canonical Grounding
Ring 3 β Framework Connections
This frontend is designed to be simple, fast, and reliable. No complex frameworks - just clean HTML/CSS/JavaScript that works everywhere. πͺ
Canonical Hub: CANONICAL_INDEX